<template>
  <div class="recruitmentManagement">
    <van-nav-bar title="新建工资条模版" left-arrow @click-left="$router.go(-1)"></van-nav-bar>

    <van-cell-group>
      <van-field
        autocomplete="off"
        v-model="categoryName"
        label
        placeholder="输入工资条名称如（深圳市康复网络科技有限公司）"
      />
    </van-cell-group>

    <div v-for="(item,index) in menuList" :key="index">
      <van-field
        autocomplete="off"
        v-model="item.val"
        center
        :disabled="typeModel==0"
        class="filedInput"
        clearable
        label
        placeholder="输入类型如（加班费）"
        @blur="blurChange(item.val,index)"
      >
        <!-- <template #button>
        <van-field autocomplete="off" 
          v-model="item.price" 
          :disabled="typeModel!=0" label="" 
          :placeholder="typeModel !=0 ? '请到输入工资页面输入' : '请输入' "
        />
        </template>-->
      </van-field>
    </div>
    <div>
      <van-field autocomplete="off" class="filedInput" value="实发工资" readonly />
    </div>

    <div class="addRemove" v-show="typeModel!=0" @click="add()" type="primary">
      <van-icon name="plus" size="25" />
    </div>
    <div class="addRemove red" v-show="typeModel!=0" @click="remove()" type="warning">
      <van-icon name="minus" size="25" />
    </div>
    <div style="height:60px"></div>
    <!-- <van-field autocomplete="off"
      v-model="sms"
      center
      class='filedInput'
      clearable
      label=""
      placeholder="实发"
    >
      <template #button>
        <van-field autocomplete="off" v-model="value" :disabled="0" label="" placeholder="请到输入工资页面输入" />
      </template>
    </van-field>-->

    <!-- <van-button type="primary" block>修改工资条模版</van-button> -->

    <div class="bottom-btn">
      <van-button class="btn-flex" @click="success()" type="info">完成</van-button>
    </div>
  </div>
</template>

<script>
import comFilterMenu from '../../../components/comFilterMenu'
import comJobItem from '../../../components/comJobItem'
import {obj} from '../../../constants/comUtils'

import quickMenu from './common/quickMenu'
import lend from '@/assets/img/myCompany/lend.png'
import more from '@/assets/img/myCompany/more.png'
import salary from '@/assets/img/myCompany/salary.png'
import signUp from '@/assets/img/myCompany/signUp.png'
import work from '@/assets/img/myCompany/work.png'

import {reqGetlistsOwner} from '@/api/myCompany.js'
import {ImagePreview, Toast, Dialog} from 'vant'

const rightOptionObj = {
  read: '离职',
  unread: '在职',
  zili: '自离'
}
const rightOption = [
  {text: '在职', value: 'unread'},
  {text: '离职', value: 'read'},
  {text: '自离', value: 'zili'}
]

export default {
  name: 'addsalaryModel',
  components: {
    quickMenu,
    comJobItem,
    comFilterMenu
  },
  data() {
    return {
      categoryName: '',
      rightValue: 'unread',
      titleName: '报名未读',
      typeModel: '',
      rightOption,
      rightOptionObj,
      showOverlay: false,
      navList: [
        {
          id: 1,
          text: '新建',
          icon: signUp
        }
      ],
      str: '',
      menuList: [
        {
          item: 1,
          val: '',
          price: ''
        }
      ],
      needObj: obj,
      needObjTotal: '',

      CompanyID: '',
      JobUserId: '',
      JobId: '',
      /*
       * quickMenu 组件需要，暂时保留
       * */
      icons: ['fa fa-github', 'fa fa-comment', 'fa fa-code', 'fa fa-envelope'],
      list: [{isLink: false}, {isLink: true, url: '/mime'}, {isLink: true, url: '/'}, {isLink: false}]
    }
  },
  async created() {
    this.typeModel = this.$route.query.type
    this.CompanyID = this.$route.params.companyID.slice(10)
    this.JobUserId = this.$route.query.jobuserid
    this.JobId = this.$route.query.jobid

    const comMesRes = await this.$api.myCompany.reqGetlistsOwner()
    if (comMesRes.code === 200) {
      this.needObj = comMesRes.data.items
      this.needObjTotal = comMesRes.data.count
    }
  },
  mounted() {},
  methods: {
    async success() {
      /*
       * 将menulist所有的字段名称取出来
       * list是要发送给后台的数据
       */
      let list = []
      for (let i in this.menuList) {
        /*
         * 将为空的input去除
         */
        if (this.menuList[i].val.trim() !== '' && this.menuList[i].val.trim() !== '实发工资') {
          list.push(this.menuList[i].val)
        }
      }
      list.push('实发工资')

      /*
       * 判断数组是否为空
       */
      if (!this.categoryName) {
        Toast.fail('名称不能为空')
      } else if (list.length == 0) {
        Toast.fail('类型不能为空')
      } else {
        //数据
        let params = {
          CompanyID: this.CompanyID,
          CategoryName: this.categoryName,
          CategoryList: list.join(','),
          JobId: this.JobId,
          JobUserId: this.JobUserId
        }

        let res = await this.$api.myCompany.CreateSalaryCategoryInfo(params)
        if (res.code == 200) {
          try {
            let result = JSON.parse(res.data)
            if (result.result == '0') {
              Toast.fail(res.data ? res.data : '创建失败请重试！')
              return
            }
          } catch {
            Toast.fail('创建失败请重试！')
            return
          }

          Toast.success('创建成功')

          this.$router.back()
        }
      }
    },
    blurChange(e, index) {
      this.menuList.map((item, i) => {
        if (item.val === e && i != index) {
          Toast.fail(`已存在[${e}],请修改`)
        }
      })
    },
    add() {
      this.menuList.push({
        item: 1 + this.menuList.length,
        val: '',
        price: ''
      })
    },
    remove(myindex) {
      if (this.menuList.length <= 0) {
        Toast.fail('类型最少为一个')
      } else {
        this.menuList.splice(this.menuList.length - 1, 1)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.recruitmentManagement {
  width: 100%;

  .filedInput {
    height: 40px;
    // border-bottom:1px solid #ccc;
    margin-top: 5px;
  }
  .bottom-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    .btn-flex {
      flex: 1;
    }
    .btn-flex + .btn-flex {
      margin-left: 10px;
    }
  }
  .addRemove {
    text-align: center;
    box-shadow: 0px 0px 5px 0 #eaeaea;
    margin-top: 5px;
    color: #b3b3b3;
    padding: 5px 0;
    background: #fff;
    &.red {
    }
  }
}
</style>
